<template>
  <div class="meeting-service">
    <div class="header">
      <div class="title">会议服务</div>
      <div class="actions">
        <a-button type="primary" @click="addServiceItem">
          <template #icon>
            <icon-plus />
          </template>
        </a-button>
        <a-button @click="deleteServiceItem">
          <template #icon>
            <icon-minus />
          </template>
        </a-button>
      </div>
    </div>
    <div class="content">
      <!-- 空状态显示 -->
      <div v-if="data.length === 0" class="empty-state">
        <div class="empty-icon">📋</div>
        <div class="empty-text">暂无会议服务</div>
        <div class="empty-description">点击上方 "+" 按钮添加会议服务</div>
      </div>

      <div v-for="(item, index) in data" :key="index" class="service-item">
        <div class="service-row">
          <div class="input-group">
            <span class="label">服务项目：</span>
            <a-input-search
              readonly
              :model-value="getServiceNamesByIds(item.serviceIds)"
              placeholder="请选择"
              class="input service-input"
              @click="showServiceSelectModal(index)"
            />
          </div>
          <div class="input-group">
            <span class="label">负责人：</span>
            <a-input
              readonly
              disabled
              :model-value="getClassNamesByIds(item.userIds)"
              placeholder="负责人自动带出"
              class="input"
              style="background: #f5f5f5;"
            />
          </div>
        </div>
        <div class="input-group other-service">
          <span class="label">其他会议服务：</span>
          <a-input
            readonly
            :model-value="item.otherService"
            placeholder="请输入"
            class="input full-width"
            @click="showOtherServiceInput(index)"
          />
        </div>
      </div>
    </div>
    <!-- 服务项目选择弹窗 -->
    <a-modal
      v-model:visible="serviceItemVisible"
      :width="800"
      :height="400"
      class="service-select-modal"
      @ok="serviceItemHandleOk"
      @cancel="serviceItemHandleCancel"
    >
      <template #title>选择服务项目</template>
      <div class="service-modal-content" @scroll="handleScroll">
        <div class="service-list-container">
          <div
            v-for="service in serviceItemTransferData"
            :key="service.value"
            class="service-modal-item"
            :class="{ selected: selectingServiceId === service.value }"
            @click="handleServiceItemClick(service.value)"
          >
            <div class="service-modal-info">
              <div class="service-modal-header">
                <div class="service-modal-name">{{ service.serviceInfo || getServiceDisplayName(service.label) }}</div>
                <div class="service-modal-category">{{ service.serviceCate || getServiceCategory(service.label) }}</div>
              </div>
              <div class="service-modal-details">
                <div v-if="service.userName" class="service-modal-person">负责人：{{ service.userName }}</div>
                <div v-if="service.factoryName" class="service-modal-factory">{{ service.factoryName }}</div>
              </div>
            </div>
          </div>
          <!-- 加载更多指示器 -->
          <div v-if="isLoading" class="loading-indicator">
            <a-spin :size="16" />
            <span style="margin-left: 8px;">加载中...</span>
          </div>
          <!-- 没有更多数据提示 -->
          <div v-else-if="!pagination.hasMore && serviceItemTransferData.length > 0" class="no-more-data">
            没有更多数据了
          </div>
        </div>
      </div>
    </a-modal>
    <!-- 其他会议服务弹窗 -->
    <a-modal
      v-model:visible="otherServiceVisible"
      @ok="otherServiceHandleOk"
      @cancel="otherServiceHandleCancel"
    >
      <template #title>其他会议服务</template>
      <div>
        <a-textarea
          v-model="data[rowIndex].otherService"
          placeholder="请输入其他会议服务"
          :auto-size="{ minRows: 3, maxRows: 5 }"
        />
      </div>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
import {
  contectsApptree,
  serviceItem
} from '@/apis/meet/component'

const props = defineProps({
  type: Boolean
})

const emit = defineEmits(['get-meeting-service-form-value'])

// 移除 CustomTransfer 相关内容

interface ServiceItem {
  serviceIds: string[] // 会议服务ID集合
  userIds: string[] // userIds
  otherService: string // 其他服务备注信息
}

interface TransferItem {
  label: string
  value: string
  disabled: boolean // 改为必填属性
  userId?: string
  userName?: string
  serviceInfo?: string
  serviceCate?: string
  factoryName?: string
}

interface TreeNode {
  key: string
  title: string
  children?: TreeNode[]
  userid?: string
}

const rowIndex = ref<number>(0)
const treeData = ref<TreeNode[]>([])
const originalTreeData = ref<TreeNode[]>([]) // 保存原始树结构数据
const serviceItemVisible = ref(false)
const selectingServiceId = ref('')
const selectingRowIndex = ref(0)

// const classVisible = ref(false) // 已移除负责人弹窗功能
const otherServiceVisible = ref(false)

const data = ref<ServiceItem[]>([
  {
    serviceIds: [],
    userIds: [],
    otherService: ''
  }
])

const serviceItemTransferData = ref<TransferItem[]>([])

// 分页相关状态
const pagination = ref({
  page: 1,
  size: 10,
  total: 0,
  hasMore: true
})
const isLoading = ref(false)

// 递归转换函数
const transformData = (data: any[]): TreeNode[] => {
  return data.map((item) => ({
    key: item.userid || item.key,
    title: item.name || item.title,
    children: item.children?.length > 0 ? transformData(item.children) : [],
    userid: item.userid,
    type: item.type,
    workId: item.workId,
    avatar: item.avatar,
    deptName: item.deptName
  }))
}

// 获取服务项目名称
const getServiceNamesByIds = (ids: string[]): string[] => {
  return ids.reduce((result: string[], id) => {
    const item = serviceItemTransferData.value.find((item) => item.value === id)
    if (item?.label) {
      result.push(item.label)
    }
    return result
  }, [])
}

// 解析服务显示名称（去掉厂区和服务类前缀）
const getServiceDisplayName = (label: string): string => {
  const parts = label.split('/')
  return parts.length >= 3 ? parts[2] : label
}

// 解析服务类别
const getServiceCategory = (label: string): string => {
  const parts = label.split('/')
  if (parts.length >= 2) {
    return `${parts[0]} · ${parts[1]}`
  }
  return parts[0] || label
}

// 获取负责人名称
const getClassNamesByIds = (ids: string[]): string => {
  if (!ids || ids.length === 0) return ''

  // 在树形数据中查找所有选中的名字
  const findNamesInTree = (nodes: TreeNode[]): string[] => {
    const names: string[] = []
    for (const node of nodes) {
      if (ids.includes(node.key)) {
        names.push(node.title)
      }
      if (node.children?.length) {
        names.push(...findNamesInTree(node.children))
      }
    }
    return names
  }

  const names = findNamesInTree(treeData.value)
  return names.join('、')
}

// 获取服务项目列表
const serviceItemFc = async (isLoadMore = false) => {
  if (isLoading.value) return

  try {
    isLoading.value = true

    const query = {
      page: pagination.value.page,
      size: pagination.value.size
    }

    const res = await serviceItem(query)

    if (res && res.data && res.data.list) {
      const newItems = res.data.list.map((item) => ({
        value: item.id,
        label: `${item.factoryName}/${item.serviceCate}/${item.serviceInfo}`,
        disabled: false,
        userId: item.userId || '',
        userName: item.userName || '',
        serviceInfo: item.serviceInfo || '',
        serviceCate: item.serviceCate || '',
        factoryName: item.factoryName || ''
      }))

      if (isLoadMore) {
        // 追加数据
        serviceItemTransferData.value = [...serviceItemTransferData.value, ...newItems]
      } else {
        // 初始化数据
        serviceItemTransferData.value = newItems
      }

      // 更新分页信息
      pagination.value.total = res.data.total || 0
      pagination.value.hasMore = newItems.length === pagination.value.size
      && serviceItemTransferData.value.length < pagination.value.total
    }
  } catch (error) {
    console.error('获取服务项目列表失败:', error)
  } finally {
    isLoading.value = false
  }
}

// 加载更多数据
const loadMoreData = async () => {
  if (!pagination.value.hasMore || isLoading.value) return

  pagination.value.page += 1
  await serviceItemFc(true)
}

// 显示服务选择弹窗
const showServiceSelectModal = async (index: number) => {
  selectingRowIndex.value = index
  selectingServiceId.value = data.value[index].serviceIds[0] || ''

  // 重置分页状态
  pagination.value.page = 1
  pagination.value.hasMore = true
  serviceItemTransferData.value = []

  // 重新加载数据
  await serviceItemFc(false)

  serviceItemVisible.value = true
}

// 滚动事件处理
const handleScroll = (event: Event) => {
  const target = event.target as HTMLElement
  const scrollTop = target.scrollTop
  const scrollHeight = target.scrollHeight
  const clientHeight = target.clientHeight

  // 当滚动到距离底部50px时触发加载更多
  if (scrollHeight - scrollTop - clientHeight < 50) {
    loadMoreData()
  }
}

// 显示其他会议服务输入框
const showOtherServiceInput = (index: number) => {
  rowIndex.value = index
  otherServiceVisible.value = true
}

// 服务项目输入框点击事件 (已废弃，使用showServiceSelectModal替代)
// const serviceItemInputSearchChange = (index: number) => {
//   rowIndex.value = index
//   serviceItemVisible.value = true
// }

// 负责人输入框点击事件（禁用）
// const classInputSearchChange = (index: number) => {
//   rowIndex.value = index
//   classVisible.value = true
// }

// 新增会议服务
const addServiceItem = () => {
  data.value.push({
    serviceIds: [],
    userIds: [],
    otherService: ''
  })
  // 变更后立即 emit 深拷贝后的完整数据，确保响应式
  emit('get-meeting-service-form-value', { value: JSON.parse(JSON.stringify(data.value)) })
}

// 删除会议服务
const deleteServiceItem = () => {
  if (data.value.length > 0) {
    data.value.pop()
    // 如果删除了所有行，添加一个空行
    if (data.value.length === 0) {
      data.value.push({
        serviceIds: [],
        userIds: [],
        otherService: ''
      })
    }
    // 变更后立即 emit 深拷贝后的完整数据，确保响应式
    emit('get-meeting-service-form-value', { value: JSON.parse(JSON.stringify(data.value)) })
  }
}

// 处理服务项目点击（支持取消选择）
const handleServiceItemClick = (serviceValue: string) => {
  // 如果点击的是已选中的项，则取消选择
  if (selectingServiceId.value === serviceValue) {
    selectingServiceId.value = ''
  } else {
    // 否则选择该项
    selectingServiceId.value = serviceValue
  }
}

// 弹窗确认和取消事件
const serviceItemHandleOk = () => {
  const idx = selectingRowIndex.value
  data.value[idx].serviceIds = [selectingServiceId.value]
  // 自动带出负责人
  const service = serviceItemTransferData.value.find((item) => item.value === selectingServiceId.value)
  if (service && service.userId) {
    data.value[idx].userIds = [service.userId]
  } else {
    data.value[idx].userIds = []
  }
  serviceItemVisible.value = false
  emit('get-meeting-service-form-value', { value: JSON.parse(JSON.stringify(data.value)) })
}

const serviceItemHandleCancel = () => {
  serviceItemVisible.value = false
}

// 负责人弹窗相关代码全部注释或删除
// const classHandleOk = () => {
//   classVisible.value = false
//   // 变更后立即 emit 深拷贝后的完整数据，确保响应式
//   emit('get-meeting-service-form-value', { value: JSON.parse(JSON.stringify(data.value)) })
// }

// const classHandleCancel = () => {
//   classVisible.value = false
// }

const otherServiceHandleOk = () => {
  otherServiceVisible.value = false
  // 变更后立即 emit 深拷贝后的完整数据，确保响应式
  emit('get-meeting-service-form-value', { value: JSON.parse(JSON.stringify(data.value)) })
}

const otherServiceHandleCancel = () => {
  otherServiceVisible.value = false
}

// 获取负责人树状列表
const contectsApptreehFc = async () => {
  const res = await contectsApptree()
  treeData.value = transformData(res.data)
  originalTreeData.value = transformData(res.data) // 保存原始树结构
}

// 处理树形数据更新 (暂未使用，保留用于未来扩展)
// const handleTreeDataUpdate = ({ data, isReset }: { data: any[], isReset: boolean }) => {
//   if (isReset) {
//     // 如果是清空搜索框触发的，恢复原始树形数据
//     treeData.value = originalTreeData.value
//   } else {
//     try {
//       console.error('Search result data:', data) // 使用console.error替代console.log
//       treeData.value = transformData(data)
//     } catch (error) {
//       console.error('Error transforming search data:', error)
//       // 如果转换失败，保持原有数据不变
//       treeData.value = originalTreeData.value
//     }
//   }
// }

// 修改 onNodeSelect 函数 (暂未使用，保留用于未来扩展)
// const onNodeSelect = (selectedKeys: string[], event: any) => {
//   const { node } = event
//   // 只处理用户节点
//   if (node.type !== 'user') return

//   // 检查节点是否已经被选中
//   const isSelected = data.value[rowIndex.value].userIds.includes(node.key)

//   if (isSelected) {
//     // 如果已经选中，则取消选中
//     data.value[rowIndex.value].userIds = data.value[rowIndex.value].userIds.filter((id) => id !== node.key)
//   } else {
//     // 如果未选中，则选中
//     if (!data.value[rowIndex.value].userIds.includes(node.key)) {
//       data.value[rowIndex.value].userIds.push(node.key)
//     }
//   }
// }

// 修改 onNodeCheck 函数 (暂未使用，保留用于未来扩展)
// const onNodeCheck = (checkedKeys, event) => {
//   const { node } = event
//   // 只处理用户节点
//   if (node.type !== 'user') return

//   // 更新选中状态
//   data.value[rowIndex.value].userIds = checkedKeys
// }

// 服务项目选择单选时自动带出负责人 (暂未使用，保留用于未来扩展)
// const onServiceRadioChange = (index: number, value: string) => {
//   const service = serviceItemTransferData.value.find((item) => item.value === value)
//   if (service && service.userId) {
//     data.value[index].userIds = [service.userId]
//   } else {
//     data.value[index].userIds = []
//   }
//   // 变更后立即 emit 深拷贝后的完整数据，确保响应式
//   emit('get-meeting-service-form-value', { value: JSON.parse(JSON.stringify(data.value)) })
// }

// 监听 serviceIds 变化，自动填充负责人（兼容直接赋值）
watch(
  () => data.value.map((item) => item.serviceIds && item.serviceIds[0]),
  (newVal) => {
    newVal.forEach((serviceId, idx) => {
      if (serviceId) {
        const service = serviceItemTransferData.value.find((item) => item.value === serviceId)
        if (service && service.userId) {
          data.value[idx].userIds = [service.userId]
        } else {
          data.value[idx].userIds = []
        }
      } else {
        data.value[idx].userIds = []
      }
    })
  },
  { deep: true }
)

// 初始化和 watch 保持 emit 方式一致
watch(
  () => props.type,
  () => {
    emit('get-meeting-service-form-value', { value: JSON.parse(JSON.stringify(data.value)) })
  }
)

onMounted(() => {
  contectsApptreehFc()
  // 初始化时主动触发一次事件
  emit('get-meeting-service-form-value', { value: JSON.parse(JSON.stringify(data.value)) })
})
</script>

<style lang="scss" scoped>
.meeting-service {
  width: 100%;
  max-width: 900px;
  height: auto;
  min-height: 500px;
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;

  .header {
    display: flex;
    padding: 20px 24px;
    align-items: center;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border-bottom: 1px solid #e2e8f0;

    .title {
      font-size: 18px;
      font-weight: 600;
      color: #1e293b;
    }

    .actions {
      display: flex;
      margin-left: auto;
      gap: 12px;

      .arco-btn {
        border-radius: 8px;
        font-weight: 500;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

        &.arco-btn-primary {
          background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
          border: none;

          &:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3);
          }
        }

        &:not(.arco-btn-primary) {
          background: white;
          border: 1px solid #e2e8f0;
          color: #64748b;

          &:hover {
            background: #f8fafc;
            border-color: #cbd5e1;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
          }
        }
      }
    }
  }

  .content {
    flex: 1;
    overflow: auto;
    padding: 24px;
    background: transparent;

    .service-item {
      margin-bottom: 20px;
      padding: 20px;
      background: white;
      border-radius: 12px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
      border: 1px solid rgba(226, 232, 240, 0.8);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;

      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background: linear-gradient(90deg, #3b82f6, #8b5cf6, #06b6d4);
        opacity: 0;
        transition: opacity 0.3s ease;
      }

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
        border-color: rgba(59, 130, 246, 0.3);

        &::before {
          opacity: 1;
        }
      }

      .service-row {
        display: flex;
        justify-content: space-between;
        margin-bottom: 16px;
        padding: 0;
        gap: 20px;

        .input-group {
          display: flex;
          flex-direction: column;
          gap: 8px;
          flex: 1;

          &:last-child {
            margin-left: 0;
          }

          .label {
            font-size: 14px;
            font-weight: 500;
            color: #374151;
            margin-bottom: 4px;
            display: flex;
            align-items: center;

            &::before {
              content: '';
              width: 3px;
              height: 16px;
              background: linear-gradient(180deg, #3b82f6, #1d4ed8);
              border-radius: 2px;
              margin-right: 8px;
            }
          }

          .input {
            width: 100%;

            &.service-input {
              width: 100%;
            }

            &.full-width {
              width: 100%;
            }

            :deep(.arco-input-wrapper) {
              border-radius: 8px;
              border: 1.5px solid #e2e8f0;
              background: #f8fafc;
              transition: all 0.3s ease;
              font-size: 14px;

              &:hover {
                border-color: #cbd5e1;
                background: white;
              }

              &:focus-within {
                border-color: #3b82f6;
                background: white;
                box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
              }
            }

            :deep(.arco-input-search-btn) {
              background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
              border: none;
              border-radius: 0 6px 6px 0;

              &:hover {
                background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
              }
            }
          }
        }
      }

      .input-group.other-service {
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-top: 8px;

        .label {
          font-size: 14px;
          font-weight: 500;
          color: #374151;
          display: flex;
          align-items: center;

          &::before {
            content: '';
            width: 3px;
            height: 16px;
            background: linear-gradient(180deg, #8b5cf6, #7c3aed);
            border-radius: 2px;
            margin-right: 8px;
          }
        }

        .input {
          :deep(.arco-input-wrapper) {
            border-radius: 8px;
            border: 1.5px solid #e2e8f0;
            background: #f8fafc;
            transition: all 0.3s ease;

            &:hover {
              border-color: #cbd5e1;
              background: white;
            }

            &:focus-within {
              border-color: #8b5cf6;
              background: white;
              box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
            }
          }
        }
      }
    }
  }

  .search-input {
    width: 100%;
    max-width: 300px;
    margin-bottom: 20px;

    :deep(.arco-input-wrapper) {
      border-radius: 8px;
      border: 1.5px solid #e2e8f0;
      background: white;
      transition: all 0.3s ease;

      &:hover {
        border-color: #cbd5e1;
      }

      &:focus-within {
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
      }
    }
  }

  // 服务选择弹窗样式优化 - 使用更具体的选择器
  :deep(.arco-modal) {
    .arco-modal-content {
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    }

    .arco-modal-header {
      background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
      border-bottom: 2px solid rgba(59, 130, 246, 0.1);
      padding: 20px 24px;

      .arco-modal-title {
        font-size: 18px;
        font-weight: 600;
        color: #1e293b;
      }
    }

    .arco-modal-body {
      padding: 24px;
      background: #f8fafc;
      max-height: 500px;
      overflow-y: auto;
    }

    .arco-textarea-wrapper {
        border-radius: 8px;
        border: 1.5px solid #e2e8f0;
        background: white;
        transition: all 0.3s ease;

        &:hover {
          border-color: #cbd5e1;
        }

        &:focus-within {
          border-color: #8b5cf6;
          box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
        }
      }
    }

    .arco-modal-footer {
      background: white;
      border-top: 1px solid #e2e8f0;
      padding: 16px 24px;

      .arco-btn {
        border-radius: 8px;
        font-weight: 500;
        padding: 8px 20px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

        &.arco-btn-primary {
          background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
          border: none;
          box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);

          &:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3);
          }
        }

        &:not(.arco-btn-primary) {
          background: white;
          border: 1px solid #e2e8f0;
          color: #64748b;

          &:hover {
            background: #f8fafc;
            border-color: #cbd5e1;
            transform: translateY(-1px);
          }
        }
      }
    }
  }

  // 使用与 startApp 相同的服务弹窗样式
  .service-modal-content {
    max-height: 600px;
    overflow-y: auto;
    padding: 8px;
  }

  .service-list-container {
    width: 100%;
  }

  .service-modal-item {
    padding: 20px;
    border: 1px solid #e5e6eb;
    border-radius: 12px;
    transition: all 0.2s;
    margin-bottom: 8px;
    cursor: pointer;

    &:last-child {
      margin-bottom: 0;
    }

    &:hover {
      border-color: #2e71ff;
      box-shadow: 0 4px 12px rgba(46, 113, 255, 0.15);
    }

    &.selected {
      border-color: #2e71ff;
      background-color: #f0f7ff;
      box-shadow: 0 4px 12px rgba(46, 113, 255, 0.15);

      .service-modal-name {
        color: #2e71ff;
        font-weight: 600;
      }
    }
  }

  .service-modal-info {
    width: 100%;
  }

  .service-modal-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
  }

  .service-modal-name {
    font-weight: 500;
    font-size: 16px;
    color: #1d2129;
    line-height: 1.4;
    word-break: break-word;
  }

  .service-modal-category {
    display: inline-block;
    padding: 4px 12px;
    background-color: #e8f4ff;
    color: #2e71ff;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    width: fit-content;
  }

  .service-modal-details {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 14px;
    color: #86909c;
  }

  .service-modal-person,
  .service-modal-factory {
    font-size: 14px;
    color: #86909c;
    line-height: 1.4;
    word-break: break-word;
  }

  // 加载指示器样式
  .loading-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: #86909c;
    font-size: 14px;
  }

  // 无更多数据提示样式
  .no-more-data {
    text-align: center;
    padding: 20px;
    color: #86909c;
    font-size: 14px;
    border-top: 1px solid #f0f0f0;
    margin-top: 8px;
  }

  // 空状态优化
  .empty-state {
    text-align: center;
    padding: 40px 20px;
    color: #64748b;

    .empty-icon {
      font-size: 48px;
      margin-bottom: 16px;
      opacity: 0.6;
    }

    .empty-text {
      font-size: 16px;
      margin-bottom: 8px;
    }

    .empty-description {
      font-size: 14px;
      opacity: 0.8;
    }
  }

  // 响应式设计
  @media (max-width: 768px) {
    .meeting-service {
      border-radius: 8px;
      margin: 0 8px;
    }

    .header {
      padding: 16px 20px;
      flex-direction: column;
      gap: 12px;
      align-items: flex-start;

      .actions {
        margin-left: 0;
        width: 100%;
        justify-content: center;
      }
    }

    .content {
      padding: 16px;

      .service-item {
        .service-row {
          flex-direction: column;
          gap: 16px;
        }
      }
    }

    :deep(.arco-modal) {
      .arco-modal-content {
        margin: 16px;
        width: calc(100vw - 32px);
      }
    }
  }
</style>
